Les menus sont une partie cruciale de l'intégration avec l'interface utilisateur des systèmes d'exploitation, donc dans cette leçon, nous
verrons comment créer des menus uniques pour notre application électronique à l'aide de deux modules, les modules de menu et d'élément de
menu.
Comme son nom l'indique, une instance d'un menu sera remplie d'éléments de menu.
Voyons donc cela avec un exemple basique.
Comme toujours, je commencerai par exiger ces deux modules du menu électronique et de l'élément de menu, tous deux avec des
M majuscules.
Au fur et à mesure que ces modules exposent les classes, la première étape consiste à créer un menu que nous pouvons remplir avec des éléments de menu.
Laissez le menu principal égaler le nouveau menu de la semaine prochaine dans son intégralité.
Ce menu principal avec certains éléments de menu crée un nouvel élément de menu.
Élément de menu un nouvel élément de menu égal.
Cela prend un objet avec des propriétés pour cet élément de menu, je ne définirai que l'étiquette pour le moment, c'est
ce que l'élément apparaîtra dans le menu.
Maintenant, avant de continuer, il est très important de comprendre les différences entre les menus up sous Windows,
Mac et Linux.
La plus importante de ces différences étant que sur Mac, le premier élément de menu sera toujours étiqueté
avec le nom de l'application.
Dans ce cas, il se trouve que c'est l'électron comme étiquette cette année-là.
Mais il est très important de garder à l'esprit que la documentation couvre ces différences plus en détail et les verra
lors de la construction de notre premier projet dans les leçons suivantes.
Juste quelque chose dont il faut être conscient pour le moment.
OK, nous avons un menu et nous avons un élément de menu à ajouter à ce menu.
La première façon de faire est donc d'utiliser les menus.
Ajouter la méthode d'instance, le menu principal, ajouter l'élément de menu un.
Et enfin, nous devons dire à notre application d'utiliser le menu principal comme menu principal de l'application pour cela.
L'application doit être prête.
Donc, en créant une fenêtre, vu que cela est exécuté sur l'événement prêt appelé la classe de menu, une
méthode de menu d'application de jeu statique passant dans le menu principal.
Résumons.
Nous créons un menu instantané avec la classe de menu d'Electron attribuant un menu principal à deux.
Ensuite, nous créons un élément de menu unique avec une étiquette d'électron, cette fois en utilisant la classe d'éléments de menu.
Au lieu de cela, nous ajoutons cet élément de menu, l'élément de menu instantané un à la fin du menu principal.
Cependant, nous n'avons qu'un seul, donc la fin ou le début sont les mêmes.
Et enfin, nous disons à Electron d'utiliser le menu principal comme menu principal de niveau supérieur pour l'application.
Sauvegardez ceci, et là, nous avons tous les éléments de menu standard que nous avions auparavant sont maintenant partis et à la
place, nous avons l'élément unique avec une étiquette d'électron pour le moment, cela n'ayant aucune logique attachée à cela.
Ce que nous attendons généralement d'un élément de menu de niveau supérieur comme celui-ci, c'est d'obtenir une liste déroulante des
éléments de menu associés lorsque vous cliquez dessus, cette liste déroulante étant appelée sous-menu.
Alors ajoutons-en un dans l'élément de menu un constructeur.
Définissez la propriété de sous-menu sur un tableau.
Dans lequel nous pouvons maintenant ajouter plus d'éléments de menu maintenant, nous pourrions à nouveau créer ces éléments de menu avec la
classe d'éléments de menu, comme nous l'avons fait ici, mais à la place, Electron nous permet de spécifier des modèles de menu, des modèles de menu,
essentiellement des objets de constructeur d'élément de menu tels que comme celui dans lequel nous travaillons.
Ajoutez donc un objet à ce tableau de sous-menus, ce qui représente un élément de menu unique avec une étiquette d'élément
un, dupliquez-le plusieurs fois.
Les articles deux et trois sont sauvegardés.
Nous ne voyons toujours que l'élément de menu un car c'est l'élément de menu de niveau supérieur, mais lorsque je clique dessus, les éléments
un, deux et trois sont présentés dans un menu déroulant ou un sous-menu.
Chacun de ces nouveaux éléments de menu étant exactement le même type instancié d'élément de
menu que notre élément de menu d'origine, ce qui signifie qu'ils peuvent à nouveau contenir leurs propres sous-menus sur l'élément pour définir un sous-menu
un tableau avec un nouvel objet d'élément de menu intitulé sous-élément une sauvegarde.
Cliquez sur l'élément de menu de niveau supérieur pour avoir maintenant une flèche pour indiquer qu'il contient des éléments de sous-menu,
survolez-le et là, un autre sous-menu avec l'élément Subba.
Cela peut aller infiniment en profondeur, mais la profondeur maximale recommandée est généralement de deux à trois niveaux, car les choses peuvent
devenir un peu déroutantes.
Donc, définir des éléments de menu à l'aide de ces modèles d'objets est beaucoup plus simple.
Et heureusement, Electron nous permet également de le faire pour les éléments de haut niveau au lieu de les créer individuellement et
de les envoyer au menu, par exemple, comme ceci pour le faire ce week-end.
Au lieu de créer un nouveau menu, par exemple, utilisez les classes de menu tirées de la méthode statique du modèle
dans laquelle décrira toute la structure du menu du menu principal exactement comme nous l'avons fait ici.
Cela prend un tableau comme un sous-menu.
Coupez l'objet constructeur pour l'élément de menu un, cet élément unique de niveau supérieur, nous n'avons également plus besoin
de cette méthode d'ajout et collez dans le tableau de modèles, l'objet entier.
Il y a toujours le seul et unique élément de menu de niveau supérieur dans le menu principal, mais sa structure est beaucoup
plus logique.
Maintenant, ajoutez un deuxième élément de niveau supérieur dans le tableau de modèles.
Appelez cette action avec son propre sous-menu.
Dans le sous-menu, ajoutez un élément de menu intitulé Action One.
Dupliquez-le deux fois, action et action trois sauvegardées.
Et maintenant, nous avons ce deuxième élément de menu dans notre menu principal, des actions contenant un sous-menu avec trois autres éléments
de menu.
La hiérarchie et la structure des menus sont donc assez logiques et l'utilisation de la méthode build from template, comme nous venons
de le faire, nous permet de structurer les menus très facilement.
Cela nous permet également de mieux organiser notre code.
Par exemple, tout ce tableau de menu principal peut maintenant être déplacé en dehors de Main Doges dans son propre module.
Je vais créer un nouveau fichier de menu principal dot js dans lequel nous pouvons exporter le tableau, constituant la structure du
menu principal.
Nous faisons cela en définissant sur la propriété d'exportation ancrée du module.
Donc un module de nœud standard.
Le tableau de modèles de menu principal.
Et donc maintenant, lorsque nous avons besoin de ce nouveau module de menu principal, on nous donne simplement ce tableau nécessitant l'activation
de la fonction de modèle, la barre oblique.
Donc, dans le répertoire courant, menu principal, pas besoin de spécifier le nœud d'extension JS le comprendra.
Sauver.
Et le menu fonctionne comme avant, mais nous avons rendu notre code beaucoup plus organisé, la prochaine étape
logique consiste alors à ajouter des fonctionnalités à ces éléments de menu, par exemple, une fonction qui
se déclenche lorsqu'un élément de menu est cliqué sur l'action trois, le tout à une propriété de clic, qui prend une fonction à appeler.
Lorsque cet élément est cliqué, j'utilise une fonction anonyme pour démontrer avec un message de journal de bonjour à partir
du menu principal.
Changez l'étiquette pour qu'elle corresponde bien, enregistrez-la.
Et maintenant, lorsque je clique sur saluer dans le sous-menu des actions, nous voyons cela connecté dans le terminal bonjour depuis le menu
principal.
Nous pouvons donc très facilement ajouter à peu près n'importe quelle logique sur un élément de menu.
Nous pouvons également attribuer automatiquement cet élément de menu, un raccourci clavier
à l'aide d'une chaîne d'accélérateur comme précédemment dit la propriété accélérateur des éléments de menu à shift plus ult plus G ou Garet save.
Et avant de déclencher le grand clic via le clavier, j'ai remarqué que l'électron est désormais également automatiquement ajouté
la chaîne d'accélérateur à l'étiquette des grands objets, très utile pour faire savoir à l'utilisateur que cela est
accessible avec un raccourci clavier.
Essayez ce changement alt g, vérifiez le terminal.
Et comme avant, nous avons ce message de journal.
De manière très importante, gardez à l'esprit que les raccourcis des éléments de menu ne sont pas globaux.
Comme dans la leçon précédente, les raccourcis globaux ne peuvent être enregistrés qu'avec le module de raccourcis globaux pour les
raccourcis d'élément de menu.
Pour travailler cela, il faut se concentrer, ce qui est le comportement attendu.
Bien sûr, une autre propriété d'élément de menu utile est la possibilité de désactiver certains éléments.
Je désactiverai l'action pour.
Paramètre activé sur une fausse sauvegarde.
Et cet élément est excellent et n'est plus cliquable, utile pour les actions de menu avec certaines conditions préalables.
Enfin, nous avons des rouleaux d'articles de menu.
Les rouleaux sont des éléments de menu prédéfinis qu'électron fournit de manière unique, en fonction du système d'exploitation de
l'utilisateur.
Par exemple, je changerai l'action 1 en outils de développement.
Avec un rouleau d'outils de développement à bascule, rien d'autre.
Nous voyons l'étiquette avec un résultat de raccourci généré automatiquement sur un Mac, qui sera automatiquement défini sur
le contrôle alt sur Windows et Linux, cliquez dessus et les outils de développement sont fermés ou activés et désactivés comme
le suggère le rouleau.
Cliquez à nouveau et c'est de retour.
Certains rouleaux vont même jusqu'à nous fournir l'étiquette aussi.
Comme le rouleau plein écran.
Je vais changer le deuxième élément de menu dans les actions pour avoir une seule propriété de basculer en plein écran.
Et là, nous obtenons un raccourci d'étiquette et bien sûr, la fonctionnalité associée en plein écran.
Et revenons à la normale.
Electron nous fournit plusieurs de ces rôles pré-configurés pour voir une liste naviguer sur la page
de documentation des éléments de menu juste en haut ici, deux rouleaux.
Il existe de nombreux éléments de comportement standard, notamment des éléments comme annuler, rétablir, copier, coller, etc.
Voyons quelques-uns de ceux-ci.
Je vais ajouter un nouvel élément de menu dans la deuxième position du menu principal, un emplacement typique pour
le menu d'édition, qui est ce qu'une étiquette ce gif.
Modifiez un sous-menu avec un élément d'annulation.
Refaire.
Copiez et collez, j'ajouterai une zone de texte pour démontrer sur l'index ouvert, pas html ajouter immédiatement après
la zone de texte d'en-tête enregistrer.
Et aussi le menu principal, je fermerai les outils de développement à partir du menu pour nous permettre de voir toute la
zone de texte, et lorsque nous inspectons ce menu d'édition, notez qu'électron a également pris la liberté d'ajouter
un rôle de dictée et d'accéder aux emojis et symboles, ceci étant le résultat des rôles copier-coller dans ce menu.
Ajoutez quelque chose à cette zone de texte, du texte de test.
J'aime cette copie.
Ensuite, collez, ce qui fait ce que nous attendons.
Essayez d'annuler.
Et encore une fois, nos commandes de base sont inversées, notez que nous aurions pu également dire un seul rouleau de menu d'édition
pour obtenir automatiquement tout ce comportement.
Cela vaut vraiment la peine de jeter un coup d'œil à ces éléments de menu dans la liste suivante.
Et nous allons pousser les menus un peu plus loin et voir comment créer des menus contextuels par clic droit.